<template>
  <el-form>
    <el-form-item>
      <el-upload
        class="upload-demo"
        ref="upload"
        :action="baseUrl + this.file.methodurl"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        list-type="picture"
        :auto-upload="false"
        :data="uploaddate"
        :before-upload="beforeAvatarUpload"
        :on-success="test"
      >
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style=" margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-form-item>
  </el-form>

</template>
<script>
  export default {
    props: ['file'],
    data() {
      return {
        uploaddate: {
          row: '',
          index: ''
        }
      }
    },
    methods: {
      submitUpload() {
        // this.$router.go(0)
        this.uploaddate.row = JSON.stringify(this.file.indexRow)
        this.uploaddate.index = JSON.stringify(this.file.index)
        this.$refs.upload.submit()
      },
      beforeAvatarUpload(file) {
        const isJPG = ((file.type === 'image/jpeg') || (file.type === 'image/png'))
        const isLt5M = file.size / 1024 / 1024 < 5
        if (!isLt5M) {
          this.$message.error('上传图片大小不能超过 5MB!')
          return false
        } else if (!isJPG) {
          this.$message.error('上传图片格式必须是 PNG或 JPG 格式!')
          return false
        }
        return isLt5M
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePreview(file) {
        console.log(file)
      },
      test() {
        this.$emit('func')
      }
    }
  }
</script>
